<template>
	<view>
		<view class="">
			<u-navbar :is-back="false" title="优家丽博商城" title-color="#ffffff" title-size="36" :background="background"
				:border-bottom="false">
			</u-navbar>
			<view class="box">
				<div class="home_top">
					<!-- 输入框 -->
					<view class="iptbox" @click="sousuo">
						<van-icon name="search" color="#ffffff" size="24" />
						<input type="text" value="" placeholder="请输入关键字搜索" maxlength="-1"
							placeholder-style="color:#ffffff" />
					</view>
					<view class="wrap">
						<u-swiper :list="lunbolist" :effect3d="true" bg-color="" height="350"></u-swiper>
					</view>
				</div>
			</view>

			<view class="informbox">
				<image src="../../static/image/图层%2024.png" mode=""></image>
				<text class="tuijian">推荐</text>
				<view class="barbox">
					<u-notice-bar mode="vertical" :list="tzlist" type="none" :volume-icon="false" duration="2600">
					</u-notice-bar>
				</view>
			</view>

			<!-- 宮格 -->
			<view class="gongge">
				<view class="smallgongge" v-for="(item,index) in gglist" :key="index" @click="productlist(item)">
					<van-image round width="109rpx" height="109rpx" :src="item.img" />
					<view class="leixing">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="qianquan">
				<u-swiper :list="adlist" bg-color="" height="275"></u-swiper>
			</view>
			<view class="hr">
			</view>
		</view>

		<view class="yijiantitle">
			推荐商品
		</view>



		<!-- 推荐的商品 -->

		<view class="Modkelistbox">
			<Modkelist :listarr="list" @tiaozhuan="prodect"></Modkelist>
		</view>
	</view>
</template>
<script>
	import {
		gethomepagedata
	} from "../../api/api/index.js"
	import Modkelist from "../../components/Modkelist/index.vue"
	export default {
		data() {
			return {
				// 头部导航栏
				background: {
					backgroundImage: "linear-gradient(90deg, #FF7E65, #FF3335)"
				},
				// 轮播图
				lunbolist: [],
				// 公告
				tzlist: [],
				gglist: [],
				// 广告
				adlist: [],

				// 推荐的商品
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				identity: 0,
			}
		},
		methods: {
			// 跳转商品详情页
			prodect(e) {
				this.jumpLink({
					link: "/pages/productxq/index",
					query: {
						id: e.id
					}
				})
			},
			// 跳转到商品列表页
			productlist(v) {
				this.jumpLink({
					link: "/pages/product_list/index",query:{id:v.id}
				})
			},
			sousuo(){
				this.jumpLink({
					link: "/pages/product_list/index"
				})
			}
		},
		onLoad() {
		},
		onShow() {
			this.identity = uni.getStorageSync("identity")
			gethomepagedata().then(res => {
				this.gglist = res.data.classification
				this.lunbolist = res.data.banner.map(v => {
					v.image = v.img
					return v
				})
				this.tzlist = res.data.notice.map(v => {
					return v.content
				})
				this.adlist = res.data.advertisement.map(v => {
					v.image = v.img
					return v
				})
				this.list = res.data.commodity.map(v => {
					v.title = v.name
					v.image = v.img
					if (this.identity != 0) {
						v.prices = v.distributors_price
					} else {
						v.prices = v.price
					}
					return v
				})
			})
		},
		components: {
			Modkelist
		},
	}
</script>
<style scoped lang="scss">
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
		height: 480rpx;

		.home_top {
			position: relative;
			width: 100%;
			height: 400rpx;

			.wrap {
				// padding: 30rpx;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				box-sizing: border-box;
				z-index: 100;
			}

			.iptbox {
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				width: 705rpx;
				border-radius: 80rpx;
				height: 80rpx;
				background: rgba(255, 255, 255, .3);
				padding-left: 20rpx;
				box-sizing: border-box;
				margin: 0 auto;

				input {
					color: #FFFFFF;
					width: 600rpx;
				}
			}
		}

		.home_top:after {
			width: 140%;
			height: 400rpx;
			position: absolute;
			left: -20%;
			top: 0rpx;
			z-index: -1;
			content: '';
			border-radius: 0 0 50% 50%;
			background: linear-gradient(90deg, #FF7E65, #FF3335);
		}
	}

	.informbox {
		display: flex;
		margin-left: 18rpx;
		align-items: center;

		image {
			width: 82rpx;
			height: 32rpx;
		}

		.tuijian {
			height: 26rpx;
			width: 57rpx;
			border-radius: 56rpx;
			font-size: 18rpx;
			font-family: Source Han Sans CN;
			line-height: 26rpx;
			text-align: center;
			color: #FF3939;
			background-color: #FFDDD7;
			margin-left: 10rpx;
		}

		.barbox {
			width: 600rpx;
		}
	}

	.gongge {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.smallgongge {
			margin-left: 39rpx;
			margin-right: 39rpx;
			margin-top: 30rpx;

			.leixing {
				text-align: center;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				color: #282828;
			}
		}
	}

	.qianquan {
		width: 100%;
		margin-top: 80rpx;

		image {
			width: 729rpx;
			height: 275rpx;
		}
	}

	.hr {
		width: 100%;
		height: 15rpx;
		background: #ECECEC;
	}

	.yijiantitle {
		font-size: 36rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		text-align: center;
		color: #000000;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.Modkelistbox{
		background-color: #FFFFFF;
	}
</style>
